<template>
  <div class="knowledge-container">
    <el-card shadow="never" class="header-card">
      <div class="page-header">
        <div class="header-content">
          <el-icon class="header-icon" :size="28"><Reading /></el-icon>
          <div class="header-text">
            <h2>知识库</h2>
            <p>企业知识管理和分享</p>
          </div>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="showDialog = true">
            <el-icon><Plus /></el-icon>
            添加文章
          </el-button>
        </div>
      </div>
    </el-card>

    <el-row :gutter="20">
      <!-- 左侧分类 -->
      <el-col :span="5">
        <el-card shadow="never" class="category-card">
          <div class="category-header">
            <span>知识分类</span>
          </div>
          <el-menu :default-active="currentCategory" @select="handleCategoryChange">
            <el-menu-item index="all">
              <el-icon><Reading /></el-icon>
              <span>全部文章</span>
              <el-badge :value="totalCount" :hidden="totalCount === 0" class="badge" />
            </el-menu-item>
            <el-divider />
            <el-menu-item
              v-for="cat in categories"
              :key="cat.id"
              :index="cat.id.toString()"
            >
              <el-icon><Folder /></el-icon>
              <span>{{ cat.name }}</span>
              <el-badge :value="cat.count" :hidden="cat.count === 0" class="badge" />
            </el-menu-item>
          </el-menu>
        </el-card>

        <!-- 热门标签 -->
        <el-card shadow="never" style="margin-top: 20px;">
          <div class="category-header">
            <span>热门标签</span>
          </div>
          <div class="tags-cloud">
            <el-tag
              v-for="tag in hotTags"
              :key="tag.name"
              :type="tag.type"
              @click="handleTagClick(tag)"
              style="margin: 4px; cursor: pointer;"
            >
              {{ tag.name }} ({{ tag.count }})
            </el-tag>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧文章列表 -->
      <el-col :span="19">
        <el-card shadow="never">
          <!-- 搜索和筛选 -->
          <div class="toolbar">
            <el-input
              v-model="searchText"
              placeholder="搜索知识文章"
              clearable
              style="width: 300px;"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
            <el-select v-model="sortBy" placeholder="排序" style="width: 150px;">
              <el-option label="最新发布" value="time" />
              <el-option label="最多浏览" value="views" />
              <el-option label="最多点赞" value="likes" />
            </el-select>
          </div>

          <!-- 文章列表 -->
          <div class="articles-list">
            <div
              v-for="article in filteredArticles"
              :key="article.id"
              class="article-item"
              @click="handleViewArticle(article)"
            >
              <div class="article-main">
                <h3 class="article-title">{{ article.title }}</h3>
                <p class="article-summary">{{ article.summary }}</p>
                <div class="article-meta">
                  <el-avatar :size="24" :src="article.authorAvatar">{{ article.author[0] }}</el-avatar>
                  <span class="author-name">{{ article.author }}</span>
                  <el-divider direction="vertical" />
                  <span class="meta-item">
                    <el-icon><Clock /></el-icon>
                    {{ article.publishTime }}
                  </span>
                  <el-divider direction="vertical" />
                  <span class="meta-item">
                    <el-icon><View /></el-icon>
                    {{ article.views }}
                  </span>
                  <el-divider direction="vertical" />
                  <span class="meta-item">
                    <el-icon><StarFilled /></el-icon>
                    {{ article.likes }}
                  </span>
                </div>
                <div class="article-tags">
                  <el-tag v-for="tag in article.tags" :key="tag" size="small" effect="plain">
                    {{ tag }}
                  </el-tag>
                </div>
              </div>
              <div class="article-cover" v-if="article.cover">
                <img :src="article.cover" :alt="article.title" />
              </div>
            </div>
          </div>

          <el-empty v-if="filteredArticles.length === 0" description="暂无文章" />

          <el-pagination
            v-if="filteredArticles.length > 0"
            v-model:current-page="pagination.page"
            v-model:page-size="pagination.size"
            :page-sizes="[10, 20, 50]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            style="margin-top: 20px; justify-content: flex-end;"
          />
        </el-card>
      </el-col>
    </el-row>

    <!-- 新建文章对话框 -->
    <el-dialog v-model="showDialog" title="添加知识文章" width="800px">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入文章标题" />
        </el-form-item>
        <el-form-item label="文章分类" prop="categoryId">
          <el-select v-model="form.categoryId" placeholder="请选择分类" style="width: 100%">
            <el-option
              v-for="cat in categories"
              :key="cat.id"
              :label="cat.name"
              :value="cat.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="文章摘要" prop="summary">
          <el-input v-model="form.summary" type="textarea" :rows="3" placeholder="请输入文章摘要" />
        </el-form-item>
        <el-form-item label="文章内容" prop="content">
          <el-input v-model="form.content" type="textarea" :rows="10" placeholder="请输入文章内容" />
        </el-form-item>
        <el-form-item label="标签" prop="tags">
          <el-select v-model="form.tags" multiple allow-create filterable placeholder="请选择或输入标签" style="width: 100%">
            <el-option label="Vue" value="Vue" />
            <el-option label="React" value="React" />
            <el-option label="产品" value="产品" />
            <el-option label="设计" value="设计" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSave">发布</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Reading, Plus, Folder, Search, Clock, View, StarFilled
} from '@element-plus/icons-vue'

// 状态
const searchText = ref('')
const currentCategory = ref('all')
const sortBy = ref('time')
const showDialog = ref(false)
const formRef = ref(null)

// 分页
const pagination = reactive({
  page: 1,
  size: 10,
  total: 25
})

// 分类
const categories = ref([
  { id: 1, name: '技术文档', count: 12 },
  { id: 2, name: '产品知识', count: 8 },
  { id: 3, name: '行业资讯', count: 5 }
])

// 热门标签
const hotTags = ref([
  { name: 'Vue', count: 15, type: 'success' },
  { name: 'React', count: 12, type: 'primary' },
  { name: '产品设计', count: 10, type: 'warning' },
  { name: 'UI/UX', count: 8, type: 'danger' }
])

// 文章数据
const articles = ref([
  {
    id: 1,
    title: 'Vue 3 Composition API 最佳实践',
    summary: '深入探讨Vue 3 Composition API的使用技巧和最佳实践，帮助你写出更优雅的代码。',
    author: '张三',
    authorAvatar: '',
    publishTime: '2024-01-15',
    views: 1256,
    likes: 89,
    tags: ['Vue', '前端开发'],
    categoryId: 1,
    cover: ''
  },
  {
    id: 2,
    title: '产品经理必备技能清单',
    summary: '总结产品经理需要掌握的核心技能，包括需求分析、用户研究、项目管理等。',
    author: '李四',
    authorAvatar: '',
    publishTime: '2024-01-14',
    views: 856,
    likes: 67,
    tags: ['产品', '管理'],
    categoryId: 2,
    cover: ''
  },
  {
    id: 3,
    title: '2024年前端技术趋势',
    summary: '分析2024年前端开发领域的技术趋势和发展方向。',
    author: '王五',
    authorAvatar: '',
    publishTime: '2024-01-13',
    views: 2341,
    likes: 156,
    tags: ['前端', '趋势'],
    categoryId: 3,
    cover: ''
  }
])

// 表单
const form = reactive({
  title: '',
  categoryId: null,
  summary: '',
  content: '',
  tags: []
})

// 验证规则
const rules = {
  title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
  categoryId: [{ required: true, message: '请选择分类', trigger: 'change' }],
  content: [{ required: true, message: '请输入文章内容', trigger: 'blur' }]
}

// 计算属性
const totalCount = computed(() => {
  return articles.value.length
})

const filteredArticles = computed(() => {
  let result = articles.value

  // 分类筛选
  if (currentCategory.value !== 'all') {
    result = result.filter(a => a.categoryId === parseInt(currentCategory.value))
  }

  // 搜索筛选
  if (searchText.value) {
    result = result.filter(a =>
      a.title.includes(searchText.value) ||
      a.summary.includes(searchText.value)
    )
  }

  // 排序
  if (sortBy.value === 'views') {
    result.sort((a, b) => b.views - a.views)
  } else if (sortBy.value === 'likes') {
    result.sort((a, b) => b.likes - a.likes)
  }

  return result
})

// 方法
const handleCategoryChange = (key) => {
  currentCategory.value = key
}

const handleTagClick = (tag) => {
  searchText.value = tag.name
}

const handleViewArticle = (article) => {
  ElMessage.info('查看文章：' + article.title)
}

const handleSave = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('发布成功')
      showDialog.value = false
    }
  })
}
</script>

<style scoped>
.knowledge-container {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  color: #409EFF;
}

.header-text h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.header-text p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #909399;
}

.category-card {
  position: sticky;
  top: 20px;
}

.category-header {
  font-weight: 500;
  margin-bottom: 16px;
}

.badge {
  margin-left: auto;
}

.tags-cloud {
  padding: 10px 0;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.articles-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.article-item {
  display: flex;
  gap: 20px;
  padding: 20px;
  border: 1px solid #EBEEF5;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.article-item:hover {
  border-color: #409EFF;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.article-main {
  flex: 1;
}

.article-title {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 500;
  color: #303133;
}

.article-summary {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #909399;
}

.author-name {
  font-weight: 500;
  color: #606266;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.article-tags {
  display: flex;
  gap: 8px;
}

.article-cover {
  width: 200px;
  height: 150px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

